var geocoder;
var map;

function pasoamapa(valor){
	if (valor==1){
		var contenido = document.getElementById('bandabuscar').value;
	}
	else{
		var contenido = document.getElementById('lugarbuscar').value;
	}
	var newdiv1=document.createElement("div");
	var newdiv2=document.createElement("div");
	var newh2=document.createElement("h2");
	var newul=document.createElement("ul");
	var newbutton=document.createElement("span");

	eliminarElemento('marcos');
	eliminarElemento('botones');

	newdiv1.id = 'map_canvas';
	newdiv2.id='text_map';
	newh2.id='h2';
	newbutton.id='boton_volver';
	newdiv1.className = 'estilo_marco';
	newdiv2.className = 'estilo_marco';
	
	document.getElementById("main").appendChild(newdiv1);
	initialize();
	
	newbutton.innerHTML='<input type="submit" class="estilo_boton text_boton" value="Buscar de nuevo" onclick="pasoaseleccion()">';
	newh2.innerHTML=contenido;
	//newul.innerHTML='<p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>heffiwj</p><p>hefsdaDwj</p>';
	
	newdiv2.appendChild(newbutton);	
	newdiv2.appendChild(newh2);	
	newdiv2.appendChild(newul);

	document.getElementById("main").appendChild(newdiv2);

	codeAddress(contenido);
}

function pasoaseleccion(){

	elemento = document.getElementById('map_canvas');
	if (!elemento){
		return;
	}
	else{
		eliminarElemento('map_canvas');
		eliminarElemento('text_map');
	
	var newdiv1=document.createElement("div");
	var newdiv2=document.createElement("div");
	var newspan1=document.createElement("span");
	var newspan2=document.createElement("span");
	var newspan3=document.createElement("span");
	var newspan4=document.createElement("span");

	newdiv1.id = 'marcos';
	newdiv2.id='botones';
	newspan1.id = 'grupo';
	newspan2.id = 'mapa';
	newspan3.id = 'botongrupo';
	newspan4.id = 'botonmapa';
	newspan1.className='estilo_marco';
	newspan2.className='estilo_marco';

	newspan1.innerHTML='<img id="imagengrupo" alt="grupo" src="Images/oasislive.jpg">';
	newspan2.innerHTML='<img id="imagenmapa" alt="mapa" src="Images/mapa.gif"> ';
	newspan3.innerHTML='<input class="estilo_input text_input" type="text" id="bandabuscar" autocomplete="on" title="Buscar banda" placeholder="Buscar banda"><input class="estilo_boton text_boton" type="submit"  value="\!Busca!" onclick="crearmapa(1)">';
	newspan4.innerHTML='<input class="estilo_input text_input" type="text" id="lugarbuscar" title="Buscar localizacion" placeholder="Buscar localizacion"><input class="estilo_boton text_boton" type="submit" value="\!Busca!" onclick="crearmapa(2)">';
	
	newdiv1.appendChild(newspan1);
	newdiv1.appendChild(newspan2);
	newdiv2.appendChild(newspan3);
	newdiv2.appendChild(newspan4);
	
	document.getElementById("main").appendChild(newdiv1);
	document.getElementById("main").appendChild(newdiv2);
	}
}

function esconderletras(){
	document.getElementById('letras_casillas').style.zIndex=-1;
}

function crearmapa(valor){
	/*if (valor == 1){
	}
	else{
	}*/
	pasoamapa(valor);
}

function eliminarElemento(id){
	elemento = document.getElementById(id);
	if (!elemento){
		alert("El elemento selecionado no existe");
	} else {
		padre = elemento.parentNode;
		padre.removeChild(elemento);
	}
}

function anadirElemento(id){
	var newdiv=document.createElement("div");
	var newtext=document.createTextNode("Label div :");
	var aTextBox=document.createElement('input');
	aTextBox.type = 'text';
	aTextBox.value = 'Input Element';
	aTextBox.id = 'txt_cell_two_';
	newdiv.appendChild(newtext); //append text to new div
	newdiv.appendChild(aTextBox); //append text to new div
	document.getElementById("test").appendChild(newdiv); //append new div to another
}

function initialize(){
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(40.44,-3.41);
	var myOptions = {
		zoom: 11,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress(address){
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			var marker = new google.maps.Marker({
			map: map,
			position: results[0].geometry.location
		});
		} else {
			alert("Todavia andamos poco finos con la busqueda :) \n Motivo del error: " + status);
		}
	});
}
